<template>
  <div class="top-bar">
    <div class="wrap">
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <div class="right">
        <ul>
          <li @click="hdChlick">
            <img :src="userInfo.headImg" alt="" width="26" />
            用户名：{{ userInfo.nickName }}
          </li>
          <li>我的积分：{{ userInfo.coin }}</li>
          <li>获取积分</li>
          <li>叩丁狼官方</li>
          <li class="tologin-btn" @click="show" v-show="!isLogind">登录</li>
          <li class="cart-btn" v-show="isLogind">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginAPI } from "@/request/api";
export default {
  data() {
    return {
      // cartToal: 5,
    };
  },
  // watch: {
  //   "$route.path": {
  //     handler() {
  //       let mytoken = localStorage.getItem("x-auth-token");
  //       if (mytoken) {
  //         this.changeIsLogined(true);
  //       } else {
  //         this.changeIsLogined(false);
  //       }
  //     }
  //   }
  // },
  created() {
    //向我们后端服务器发起微信登录的请求，携带 code 我们需要在地址栏上面先拿这个code
    setTimeout(async () => {
      let mycode = this.$route.query.code;

      // console.log("这是mycode:", mycode);
      //加载这个topbar组件的时候不一定用户就是在微信扫码登录
      if (mycode) {
        //在拿到code之后，发起请求之前清除code
        //清除地址栏上的code(路由跳转到当前路由即可)
        this.$router.push(this.$route.path);
        let res = await WeixinLoginAPI({
          code: mycode,
        });
        // console.log(res);
        if (res.code == 0) {
          //扫码登录成功，可以拿到token

          //1.提示用户登录成功
          this.asyncChangeIsShowToast({
            msg: "登录成功！",
            type: "success",
          });
          //2.保存token值到localStorge中
          localStorage.setItem("x-auth-token", res["x-auth-token"]);
          //3.登录状态的切换
          this.changeIsLogined(true);

          //登录成功之后，获取用户信息
          this.asyncChangeUserInfo();
        } else if (res.code == 400) {
          //二维码过期
          //1.提示用户重新登录
          this.asyncChangeIsShowToast({
            msg: res.message,
            type: "warning",
          });
          //2.打开登录窗口
          this.show(true);
        } else if (res.code == 407) {
          //用户这次扫码的微信没有绑定手机号

          //1.提示用户，微信未绑定手机号，需要通过手机号登录来绑定这个微信
          this.asyncChangeIsShowToast({
            msg: res.message,
            type: "warning",
          });
          //2.打开登录窗口
          this.show(true);
          //3保存uuid，已使之后登录的时候，能够获取携带这个uuid
          localStorage.setItem("uuid", res.uuid);
        }
      } else {
        //表示扫码登录的情况，要么用户还没登录，要么用户已经登录
        let mytoken = localStorage.getItem("x-auth-token");
        // if (mytoken) {
        //   this.changeIsLogined(true);
        // } else {
        //   this.changeIsLogined(false);
        // }
        //简写
        this.changeIsLogined(Boolean(mytoken));
        if (mytoken) {
          //有登录的情况，获取用户信息
          this.asyncChangeUserInfo();
        } else {
          this.initUserInfo();
        }
      }
    }, 100);
  },
  computed: {
    ...mapState({
      isLogind: (state) => state.loginstatus.isLogind,
      cartTotal: (state) => state.userInfo.cartTotal,
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  methods: {
    ...mapMutations({
      show: "handleLoginModal/showLogin",
      changeIsShowToast: "handleToast/changeIsShowToast",
      changeIsLogined: "loginstatus/changeIsLogined",
      initUserInfo: "userInfo/initUserInfo",
    }),
    ...mapActions({
      asyncChangeIsShowToast: "handleToast/asyncChangeIsShowToast",
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
    hdChlick() {
      // warning 警告
      // success 成功
      // danger 失败
      // this.changeIsShowToast({
      //   isShow: true,
      //   msg: "看图片",
      //   type: "warning",
      // });
      // setTimeout(() => {
      //   this.changeIsShowToast({
      //     isShow: false,
      //     msg: "看图片",
      //     type: "warning",
      //   });
      // }, 1500);

      //封装写法
      this.asyncChangeIsShowToast({
        msg: "请先登录",
        type: "success",
      });
    },
  },
};
</script>

<style lang = "less" scoped>
@import url("../assets/styles/global.less");
.top-bar {
  height: 40px;
  line-height: 40px;
  background: #242b39;
  color: #fffefe;
  .wrap {
    height: 40px;
    font-size: 14px;
    display: flex;
    /* background: tomato; */
    justify-content: space-between;
    .right ul {
      display: flex;
      li {
        display: flex;
        align-items: center;
        margin-left: 20px;
        cursor: pointer;
        img {
          border-radius: 13px;
          margin-right: 5px;
        }

        &.tologin-btn {
          width: 124px;
          height: 40px;
          background: @base-color;
          justify-content: center;
        }
      }
    }
  }
}
.cart-btn {
  width: 124px;
  height: 40px;
  background-color: @base-color;
  justify-content: center;
  img {
    margin-right: 6px;
  }
  b {
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-left: 6px;
    text-align: center;
    background: #fd604d;
    border-radius: 11px;
  }
}
</style>